<template lang="html">
    <div>
        <div class="title">
            <div class="left">
                <img src="../../assets/imgs/tab_icon_nor_02.png" alt="">
                <h2>精品好物</h2>
            </div>
            <div class="right">
                <h4 @click='greatGoodsMoreAction($event)'>查看更多</h4>
                <img src="../../assets/imgs/r.png" alt="">
            </div>
        </div>
        <div class="box">
              <div class="list_box" v-for="(item,key) in listData" @click="greatGoodsDetailAction($event,item.goodsId)">
                <div class="labels" v-if="item.joinActivity == 'Y'">
                    <img src="../../assets/imgs/labels.png" alt="">
                </div>
                    <div class="top_logo">
                        <img :src="item.goodsPicture" alt="">
                    </div>
                    <div class="bottom_content">
                        <h4>{{item.goodsName}}</h4>
                        <p class="details">{{item.goodsLabes}}</p>
                        <p class="price">
                          ¥<span>{{item.salePrice}}</span>
                          <span class="hui">¥{{item.originPrice}}</span>
                        </p>
                    </div>
                </div>
                <div class="loading" v-show="show">
                    <!-- <img src="../../assets/imgs/timg.gif" alt=""> -->
                    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mantpl/img/base/loading_72b1da62.gif" alt="">
                    <p>正在加载中</p>
                </div>
                <div class="loading loadings" v-show="isshow">
                        <p>亲我也是有底线的</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import {
    goodsList,
    goodsListPaging
} from "@/api/goods/goods";
export default {
    // props : ['msec']
    data () {
      return {
        listData : [],
        show : false,
        num : 2,
        list: [],
        isshow : false,
        len:0
      }
    },
    mounted () {
      window['laoWangGetMethod'] = this.laoWangGetMethod;
      this.getGoodsList();
    },
    methods : {
       laoWangGetMethod () {
         this.getList()
       },
       getList () {
         var data = {
           size : '6',
           current : this.num++
         }
         goodsListPaging(data).then(res=>{
            if (res.data.code == 'OK') {
              if (this.GetMobelType().android) {
                   window.tfb.stopLoadMore()
              }
              this.len = res.data.data.records.length;
               if (res.data.data.records.length == 0) {
                     this.isshow = true;
                     if (this.GetMobelType().android) {
                          window.tfb.stopLoadMore()
                     } else {
                          window.webkit.messageHandlers.hiddenFooterView.postMessage('over');
                     }

               } else {
                   this.show = true;
                   this.listData = this.listData.concat(res.data.data.records)
               }
               setTimeout(()=>{
                 this.show = false;
               },1000)
            } else {
              if (this.GetMobelType().android) {
                   window.tfb.stopLoadMore()
              }
            }
         })
       },
        greatGoodsMoreAction (e) {//查看更多
           if (this.GetMobelType().android) {
                window.tfb.navigateToBoutiqueList('')
           } else {
             window.webkit.messageHandlers.greatGoodsMoreAction.postMessage('');
           }
        },
        getGoodsList () {
          goodsListPaging({size : '6',current:'1'}).then(res=>{
             if (res.data.code == 'OK') {
               this.listData = res.data.data.records;
             }
            // console.log(res);
          })
        },
        greatGoodsDetailAction (e,id) {//详情
           if (this.GetMobelType().android) {
                window.tfb.navigateToGoodsDetail(id)
           } else {
                window.webkit.messageHandlers.greatGoodsDetailAction.postMessage(id);
           }
        },
        GetMobelType ()  {
            var  browser  =   {
              versions:   function()  {
                  var  u  =  window.navigator.userAgent;
                  return  {
                      trident:  u.indexOf('Trident')  >  -1, //IE内核
                      presto:  u.indexOf('Presto')  >  -1, //opera内核
                      Alipay:  u.indexOf('Alipay')  >  -1, //支付宝
                      webKit:  u.indexOf('AppleWebKit')  >  -1, //苹果、谷歌内核
                      gecko:  u.indexOf('Gecko')  >  -1  &&  u.indexOf('KHTML')  ==  -1, //火狐内核
                      mobile:  !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                      ios:  !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                      android:  u.indexOf('Android')  >  -1  ||  u.indexOf('Linux')  >  -1, //android终端或者uc浏览器
                      iPhone:  u.indexOf('iPhone')  >  -1  ||  u.indexOf('Mac')  >  -1, //是否为iPhone或者安卓QQ浏览器
                      //iPhone: u.match(/iphone|ipod|ipad/),//
                      iPad:  u.indexOf('iPad')  >  -1, //是否为iPad
                      webApp:  u.indexOf('Safari')  ==  -1, //是否为web应用程序，没有头部与底部
                      weixin:  u.indexOf('MicroMessenger')  >  -1, //是否为微信浏览器
                      qq: u.match(/\sQQ/i) !== null, //是否QQ
                      Safari:  u.indexOf('Safari')  >  -1,
                        ///Safari浏览器,
                  };
              }()
            };
            return  browser.versions;
        }
    },

}
</script>

<style scoped>
  .box {
    padding-left:0.24rem;
    padding-right:0.28rem;
    box-sizing: border-box;
    margin-top: 0.25rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 0.61rem;
    box-sizing: border-box;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .list_box {
    width:3.40rem;
    /* height:4.22rem; */
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 18px 0px rgba(204,204,204,0.42);
    border-radius:0.08rem;
    margin-top: 0.21rem;
    position: relative;

  }
  .left,.right{
    display: flex;
    align-items: center;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .left h2 {
        font-size:0.40rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);

  }
  .left img {
    width: 0.41rem;
    height: 0.41rem;
    margin-right: 0.12rem;
  }
  .right img {
    width: 0.13rem;
    height: 0.25rem;
    margin-right:0.12rem;
    margin-left: 0.08rem;
  }

  .title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left:0.24rem;
    padding-right:0.28rem;
    box-sizing: border-box;
    margin-top: 0.60rem;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .right h4{
    font-size:0.28rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(157,159,166,1);
  }
  .top_logo {
    width: 100%;
    display: flex;
    align-items: center;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    /* padding-top: 0.20rem; */
    height: 2.57rem;
    align-items: center;
    justify-content: center;
    padding-top: 0.20rem;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
    /* background-color: pink; */
  }
  .top_logo img {
    /* width: 100%; */
    height: 100%;
  }
  .bottom_content {
    padding-left: 0.20rem;
    padding-right: 0.10rem;
    box-sizing: border-box;
    position: relative;
  }
  .bottom_content h4 {
    font-size:0.30rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    margin-top: 0.24rem;
    width:100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .details {
    font-size: 0.22rem;
    margin-top: 0.14rem;
    color:rgba(102,102,102,1);
    overflow: hidden;
    white-space: nowrap;
  }
  .price {
    font-size: 0.34rem;
    color:rgba(253,35,30,1);
    margin-top: 0.22rem;
    padding-bottom: 0.27rem;
  }
  .price span {
    font-size: 0.34rem;
  }
  .labels {
    position: absolute;
    position: absolute;
    top: -0.10rem;
    left:0.12rem;
  }
  .labels img {
    width: 0.60rem;
    height: 0.6rem;
  }
  .loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.16rem;
    margin-top: 0.20rem;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .loadings {
    margin-top: 0.30rem;
    color: #ccc;
    font-size: 0.28rem;
  }
  .price .hui {
    color: #ccc;
    font-size: 0.28rem;
    text-decoration: line-through;
    margin-left: 0.10rem;
  }
</style>
